/* Basic styling for body and elements */  
body {  
    margin: 0;  
    font-family: Arial, sans-serif;  
}  

/* 将公共样式抽离 比如box-sizing:border-box */
/* 这样子conten item sub-item可以减少书写样式 */
/* 盒子模型 */
.borderBox{
    box-sizing: border-box;  
}
.flex{
    display: flex;
}
.column{
    flex-direction: column;
}

header, footer {  
    background-color: #333;  
    color: white;  
    text-align: center;  
    padding: 1em 0;  
}  

.content {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: space-between;  
    padding: 5px;  

}  
.item {  
    background-color: #f4f4f4;  
    color: #333;  
    border: 1px solid #ddd;  
    padding: 10px;  
    margin-bottom: 10px;  
    flex: 1 1 calc(33.333% - 10px); /*减去的值 跟盒子的边距有关 比如item的padding：5px,左右上下各边5px,比如减去这个空间的占用 */
    flex-wrap: wrap;
    display: flex;  
    align-items: center; 
    justify-content: space-between;  
}  
  
.sub-item {  
    background-color: #e0e0e0;  
    color: #666;  
    border: 1px solid #ccc;  
    padding: 10px;  
    box-sizing: border-box;  
    text-align: center; /* Center text within sub-items */  
    flex: 0 0 auto; /* Initially set to auto size, but will be overridden by media queries */  
    margin: 0 5px; /* Optional: add some margin between sub-items */  
}  

/* Media Queries */  

/* For screens larger than 960px */  
@media (min-width: 960px) {  
    /* 在这个屏幕持此下，item无需设置 上边写在item中的就是默认样式  */
    .sub-item {  
        flex: 0 0 calc(25% - 10px); /* Four sub-items per row, adjust margin as needed */  
    }  
}  
  
/* For screens between 600px and 960px */  
@media (min-width: 600px) and (max-width: 959px) {  
    .item {  
        flex: 1 1 calc(50% - 20px); /* Two items per row */  
    }  
    .sub-item {  
        flex: 0 0 calc(50% - 10px); /* Two sub-items per row within item, adjust margin as needed */  
    }  
}  
  
/* For screens smaller than 600px */  
@media (max-width: 599px) {  
    .item {  
        flex: 1 1 100%; /* Full width on small screens */  
    }  
    .sub-item {  
        flex: 0 0 100%; /* Full width within item on small screens */  
        margin: 0 0 10px; /* Optional: change margin to vertical only on small screens */  
    }  
}